<mat-card>Monthly reports</mat-card>
<div class="content">
  <mat-progress-spinner *ngIf="!areReportsLoaded" mode="indeterminate">
  </mat-progress-spinner>
  <div *ngIf="areReportsLoaded">
    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Index </th>
        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
      </ng-container>

      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Start date </th>
        <td mat-cell *matCellDef="let row"> {{row.startDate}}</td>
      </ng-container>

      <ng-container matColumnDef="expenses">
        <th mat-header-cell *matHeaderCellDef> Expenses </th>
        <td mat-cell *matCellDef="let row"> {{row.overallExpenses}} </td>
      </ng-container>

      <ng-container matColumnDef="income">
        <th mat-header-cell *matHeaderCellDef> Income </th>
        <td mat-cell *matCellDef="let row"> {{row.overallIncome}} </td>
      </ng-container>

      <ng-container matColumnDef="balance">
        <th mat-header-cell *matHeaderCellDef> Balance </th>
        <td mat-cell *matCellDef="let row"> {{row.balance}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['id', 'date', 'expenses', 'income', 'balance']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['id', 'date', 'expenses', 'income', 'balance']" (click)="seeReport(row.id)"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>
</div>
